<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		    <script src="../../common/vue2/vue.js"></script>
		
	</head>

	<body>
		<div id="app">
			<button-counter></button-counter>
			<button-counter></button-counter>
	
			<tab-home></tab-home>
		</div>

		<script type="text/javascript">
			Vue.config.productionTip = false;
			Vue.component('button-counter', {
				data: function() {
					return {
						count: 0
					}
				},
				template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
			})

			const tabHome = Vue.extend({
				data: function() {
					return {
						count: 0
					}
				},
				template: '<button v-on:click="count++">tabHome点我{{ count }} times.</button>'
			})
		//	Vue.component("tab-home",tabHome);
			
			var app = new Vue({
				el: "#app",
				data: {
					message: "Hello Vue!",
					counter: 0,
				},
				components:{
					"tab-home":tabHome
				},
				methods: {
					greet: function(event) {
						// `this` 在方法里指向当前 Vue 实例
						alert("Hello " + this.name + "!");
						// `event` 是原生 DOM 事件
						if (event) {
							alert(event.target.tagName);
						}
					},
				},
			});
		</script>
	</body>
</html>